import React from 'react';
import {Popoverm, Button, message, Modal} from "antd";
import Carousel from 'nuka-carousel';
import {SortableContainer, SortableElement, arrayMove} from 'react-sortable-hoc';

import DragSort from "./DragSort"
import isEmpty from 'lodash/isEmpty';
import {WeaLocaleProvider, WeaTools,WeaFormItem, WeaInput,WeaMoreButton,WeaNewScroll,WeaTable} from 'ecCom'
import { WeaDialog} from 'ecCom';
const { callApi } = WeaTools;
const getLabel = WeaLocaleProvider.getLabel;

import CustomApplication from './customApplication';
import AddCustomApplication from './addCustomApplication';
import ContainerSetting from './containerSetting';
import ManagerSetting from './managerSetting'
import './style/index';
import ReactDOM from "react-dom";


class CustomContainer extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            container: {
                imgs : [],
                img : "",
                customApplicationFontColor: "",
                data: [],


                customApplicationButtonsVisible : false,
                globalSettingButtonsVisible : false,
                showContainerSetting : false,
                rowCol: "2*3",
                addVisiable: false,
                arrayId : -1,
                editItem : {},
                authority: -1,
                deleteIds :[],
                sortIds: [],
                current : 0,
                scrollTop:0,
                ctrlHeight:0,
                customApplicationSizeType:'',
                customApplicationSize:"",
                openPageHelper:"",
                pageSize:"",
                managerSettingVisible:false,
                isManager:1,
                id:props.id,
                shareVisible: false,
                shareData:{},
                isSystem:1,
                newStyle:"",
                addOption:"1",
                sortOption:"1"

            }
        }
        this.saveCustomApplicatin(props.id);
    }

    saveCustomApplicatin = (id)=>{
        WeaTools.callApi('/api/portal/cmsetting/insertsetinfo', 'POST', {
            moduleid : id,
            sizetype:"0",
            size:"100*100",
            isfy:"0",
            shownum:"0",
            addOption:"1",
            sortOption:"1",
            stylelr:"5,5,5,5,5,5,ffffff,/spa/portal/images/customContainerDefaultBgi.jpg,5,10"
        }).then((result) => {
            this.getAllData();
        })

        /*WeaTools.callApi('/api/portal/cmsetting/savesetinfo', 'POST', {"EEinfo":JSON.stringify({"moduleid":id,"titleheight": "","layout": "","shownum": "0","sizetype": "0","moduleheight": "","size": "100*100","canedit": "","scroll": "","titlecolor": "","fillet": "","showtitle": "","modulename": "","isfy":"0","data": ""})}).then((result) => {

        })*/

    }
    getAllData = ()=>{
        let data = []
        WeaTools.callApi('/api/portal/cmsetting/getsetinfo', 'GET', {
            moduleid:this.props.id
        }).then((result) => {
            if(result && result.EEinfo && result.EEinfo.EStyleInfo){
                const  {sizetype,size,isfy,shownum,stylelr,addOption,sortOption} = result.EEinfo.EStyleInfo
                this.setStateData({
                    customApplicationSizeType:sizetype,
                    customApplicationSize:size,
                    openPageHelper:isfy,
                    pageSize:shownum,
                    newStyle:stylelr,
                    addOption:addOption,
                    sortOption:sortOption
                })
            }
            if(result && result.EContent && result.EContent.EContentInfo){
                for(let item in result.EContent.EContentInfo){
                    data.push({id:result.EContent.EContentInfo[item].infoid,text:result.EContent.EContentInfo[item].name,logo:result.EContent.EContentInfo[item].icon,bgc:result.EContent.EContentInfo[item].color?"#"+result.EContent.EContentInfo[item].color:"",url:result.EContent.EContentInfo[item].linkurl,urlType:result.EContent.EContentInfo[item].urltype,showNumberUrl:result.EContent.EContentInfo[item].counturl,createBySystem:result.EContent.EContentInfo[item].createBySystem})
                }
            }
            this.setStateData({
                "data":data,
                isSystem: this.props.isSetting == true ? 1 : 0
            })

            // customApplicationSizeType:'1',
            //     customApplicationSize:"22",
            //     openPageHelper:"",
            //     pageSize:"",
        });
    }


    componentDidMount(){

        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR =""
        let applicationTB = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            logoTextMargin = styles[9]
        }



        const width =$(".lr_customer_application_"+this.props.id).width()
        const height = $(".lr_customer_application_"+this.props.id).height()
        $("#lr_customer_application_outer_"+this.props.id).css({width:width+"px",height: height+"px"})
        $(".lr_customer_application_inter_"+this.props.id).css({width:(width-containerLR*2)+"px",height: (height-containerTB*2)+"px"})

        let lr_customApplication_example_width
        let lr_customApplication_example_height
        let h = $(".lr_customer_application_inter_"+this.props.container.id).height()
        let w = $(".lr_customer_application_inter_"+this.props.container.id).width()
        if(this.state.container.customApplicationSizeType==1){
            lr_customApplication_example_width = w*(this.state.container.customApplicationSize/100)-(2*applicationLR)+"px"
            lr_customApplication_example_height = h-applicationTB*2+"px";
        }else if(this.state.container.customApplicationSizeType==0){
            let arr = this.state.container.customApplicationSize.split("*");
            if(arr.length ==1){
                lr_customApplication_example_width = arr[0]+"px"
                lr_customApplication_example_height = arr[0]+"px"
            }else{
                lr_customApplication_example_width = arr[0]+"px"
                lr_customApplication_example_height = arr[1]+"px"
            }

        }
        $(".lr_customApplication_example_"+this.state.container.id).css({width:lr_customApplication_example_width,height:lr_customApplication_example_height})
        let index = lr_customApplication_example_height.indexOf("px");
        let hTemp = lr_customApplication_example_height.substring(0,index)
        // $(".lr_customApplication_example_div1_"+this.state.container.id).css({height:hTemp*0.25+"px"})
        // $(".lr_customApplication_example_div2_"+this.state.container.id).css({height:hTemp*0.5+"px"})
        //修改图片文字距离太远问题
        $(".lr_customApplication_text_span_new_"+this.state.container.id).css({'margin-top':logoTextMargin+'px'})
        // $(".lr_customApplication_text_span_"+this.state.container.id).css({height:(hTemp-logoTextMargin)*0.25+"px",'margin-top':logoTextMargin+'px','line-height':logoTextMargin+'px'})


        // $(".icon-coms-Left").css({"width":"30px","height":height/3+"px","line-height":height/3+"px",top:height/3+"px",left:"0px"})
        // $(".icon-coms-Right").css({"width":"30px","height":height/3+"px","line-height":height/3+"px",top:height/3+"px",right:"0px"})
        $(".icon-coms-Left").css({"width":"50px","height":"38px","line-height":"38px",top:(height-38)/2+"px",left:"0px"})
        $(".icon-coms-Right").css({"width":"50px","height":"38px","line-height":"38px",top:(height-38)/2+"px",right:"0px"})
        // $(".slick-initialized.slick-slider").css("height","48px")
        if(this.state.container.openPageHelper==1){
            if(this.state.container.ctrlHeight==0){
                this.setStateData({
                    ctrlHeight : height-containerTB

                })
            }
        }else if(this.state.container.openPageHelper==0){
            if(this.state.container.ctrlHeight==0){
                this.setStateData({
                    ctrlHeight : height
                })
            }
        }
        $(".slick-initialized.slick-slider").css({"height": (height-containerTB*2)+"px","position":"static"})
        $("ul.slick-dots").css({"position":"absolute","bottom":"0px",width:(width-containerLR*2)+"px"})
        $(".wea-new-scroll.slick-slide").height({"height":(height-containerTB*2)+"px"})
        $(".wea-new-scroll.slick-slide.slick-active").height({"height":(height-containerTB*2)+"px"})
        $("ul.slider-list").css({height:"auto"})
        $("li.slider-slide").css({position:"static"})
        $(".slider-control-centerright").css({"display":"none"})
        $(".slider-control-centerleft").css({"display":"none"})
        $(".lr_settingButtons_"+this.props.id).hide();
    }

    componentDidUpdate(){
        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR =""
        let applicationTB = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            logoTextMargin = styles[9]
        }



        const width =$(".lr_customer_application_"+this.props.id).width()
        const height = $(".lr_customer_application_"+this.props.id).height()
        $("#lr_customer_application_outer_"+this.props.id).css({width:width+"px",height: height+"px"})
        $(".lr_customer_application_inter_"+this.props.id).css({width:(width-containerLR*2)+"px",height: (height-containerTB*2)+"px"})

        let lr_customApplication_example_width
        let lr_customApplication_example_height
        let h = height-containerTB*2
        let w = width-containerLR*2
        if(this.state.container.customApplicationSizeType==1){
            // lr_customApplication_example_width = w*(this.state.container.customApplicationSize/100)-(2*applicationLR)+"px"
            lr_customApplication_example_width = (parseInt(100/this.state.container.customApplicationSize)*this.state.container.customApplicationSize/100*w- ((parseInt(100/this.state.container.customApplicationSize)*2-2)*applicationLR))/(parseInt(100/this.state.container.customApplicationSize)) +"px"


            lr_customApplication_example_height = h-applicationTB*2+"px";
        }else if(this.state.container.customApplicationSizeType==0){
            let arr = this.state.container.customApplicationSize.split("*");
            if(arr.length ==1){
                lr_customApplication_example_width = arr[0]+"px"
                lr_customApplication_example_height = arr[0]+"px"
            }else{
                lr_customApplication_example_width = arr[0]+"px"
                lr_customApplication_example_height = arr[1]+"px"
            }

        }
        $(".lr_customApplication_example_"+this.state.container.id).css({width:lr_customApplication_example_width,height:lr_customApplication_example_height})
        $(".lr_customApplication_text_span_new_"+this.state.container.id).css({width:lr_customApplication_example_width})
        let index = lr_customApplication_example_height.indexOf("px");
        let hTemp = lr_customApplication_example_height.substring(0,index)
        // $(".lr_customApplication_example_div1_"+this.state.container.id).css({height:hTemp*0.25+"px"})
        // $(".lr_customApplication_example_div2_"+this.state.container.id).css({height:hTemp*0.5+"px"})
        //修改图片文字距离太远问题
        $(".lr_customApplication_text_span_new_"+this.state.container.id).css({'margin-top':logoTextMargin+'px'})
        // $(".lr_customApplication_text_span_"+this.state.container.id).css({height:(hTemp-logoTextMargin)*0.25+"px",'margin-top':logoTextMargin+'px','line-height':logoTextMargin+'px'})



        // $(".icon-coms-Left").css({"width":"30px","height":height/3+"px","line-height":height/3+"px",top:height/3+"px",left:"0px"})
        // $(".icon-coms-Right").css({"width":"30px","height":height/3+"px","line-height":height/3+"px",top:height/3+"px",right:"0px"})
        $(".lr_customer_application_"+this.props.id+" .icon-coms-Left").css({"width":"50px","height":"38px","line-height":"38px",top:(height-38)/2+"px",left:"0px"})
        $(".icon-coms-Right").css({"width":"50px","height":"38px","line-height":"38px",top:(height-38)/2+"px",right:"0px"})
        // $(".lr_customApplication_text_span_"+this.props.id).css("line-height",$(".lr_customApplication_text_span_"+this.props.id).height()+"px")
        // $(".slick-initialized.slick-slider").css("height","48px")
        if(this.state.container.openPageHelper==1){
            if(this.state.container.ctrlHeight==0){
                this.setStateData({
                        ctrlHeight : height-containerTB

                })
            }
        }else if(this.state.container.openPageHelper==0){
            if(this.state.container.ctrlHeight==0){
                this.setStateData({
                    ctrlHeight : height
                })
            }
        }

        $( ".lr_customer_application_"+this.props.id+" lr_customer_application_class .slick-initialized.slick-slider").css({"height": (height-containerTB*2)+"px","position":"static"})
        $(".lr_customer_application_"+this.props.id+" ul.slick-dots").css({"position":"absolute","bottom":"0px",width:(width-containerLR*2)+"px"})
        $(".lr_customer_application_"+this.props.id+" .wea-new-scroll.slick-slide").height({"height":(height-containerTB*2)+"px"})
        $(".lr_customer_application_"+this.props.id+" .wea-new-scroll.slick-slide.slick-active").height({"height":(height-containerTB*2)+"px"})
        $(".lr_customer_application_"+this.props.id+" ul.slider-list").css({height:"auto"})
        $(".lr_customer_application_"+this.props.id+" li.slider-slide").css({position:"static"})
        $(".lr_customer_application_"+this.props.id+" .slider-control-centerright").css({"display":"none"})
        $(".lr_customer_application_"+this.props.id+" .slider-control-centerleft").css({"display":"none"})
        $(".lr_customer_application_"+this.props.id+" .lr_settingButtons_"+this.props.id).hide();

    }

    saveManagerSetting = (isAsynSystemSetting)=>{
        let idsString = "";
        for(let i in this.state.container.sortIds){
            idsString += ","+this.state.container.sortIds[i]
        }
        if(!idsString){
            for(let i in this.state.container.data){
                    idsString += ","+this.state.container.data[i].id
            }
        }

        if(idsString){
            idsString = idsString.substring(1)
        }


        WeaTools.callApi('/api/portal/cmsetting/savesetinfo', 'POST', {"EEinfo":JSON.stringify({"moduleid":this.props.id,"titleheight": 11,"layout": -1,"shownum": this.state.container.pageSize,"sizetype": this.state.container.customApplicationSizeType,"moduleheight": 12,"size": this.state.container.customApplicationSize,"canedit": 1,"scroll": 1,"titlecolor": 123213,"fillet": 20,"showtitle": 1,"modulename": "demo1","isfy":this.state.container.openPageHelper,stylelr:this.state.container.newStyle,"addOption":this.state.container.addOption,"sortOption":this.state.container.sortOption,"isAsynSystemSetting":isAsynSystemSetting,"data": idsString})}).then((result) => {
            if (result.api_status == true) {
                WeaTools.callApi('/api/portal/custommodule/deletecmodule', 'POST', {
                    "infoid ":this.state.container.deleteIds
                }).then((result) => {
                    message.success(getLabel(83551, '保存成功！'), 3);
                    this.setStateData({managerSettingVisible:false})
                    this.getAllData();
                });



            } else {
                message.error(getLabel(84544, '保存失败！'), 3);
            }
        });
    }

    setCustomApplicationButtonsVisible = (visible)=> {
        let container = {}
        if(fromData.urlType == "1"){
            fromData.url = "/wui/index.html#/main"+fromData.replaceData[0].mobxrouteurl
        }

        if(visible == true){
            container =  Object.assign(this.state.container ,{"customApplicationButtonsVisible" : visible,"globalSettingButtonsVisible" : false});

        }else{
            container =  Object.assign(this.state.container ,{"customApplicationButtonsVisible" : visible,"globalSettingButtonsVisible" : true});
        }
        this.setState({
            container
        })
    }

    setShowContainerSetting= (visible)=> {
        let container = {}


        if(visible == true){
            container =  Object.assign(this.state.container ,{"showContainerSetting" : visible,"globalSettingButtonsVisible" : false});

        }else{
            container =  Object.assign(this.state.container ,{"showContainerSetting" : visible,"globalSettingButtonsVisible" : true});
        }
        this.setState({
            container
        })
    }

    saveCustomApplicationSetting = ()=>{
        //保存
        this.setCustomApplicationButtonsVisible(false)
    }



    saveCustomApplication = (fromData)=>{
        let container = this.state.container
        let data = container.data;
       /* if(fromData.urlType == "1" && fromData.replaceData.length >0 && fromData.replaceData[0].mobxrouteurl){
            fromData.url = JSON.stringify(fromData.replaceData)
        }*/
        this.onAddSave(fromData)
    }

    updateMenu = (fromData) => {

        let { id ,text,logo ,bgc,url,urlType,showNumberUrl} = fromData;
        let {text : name ,logo : pic,bgc : color,urlType : ishttp ,showNumberUrl : counturl} = fromData;
        if(color){
            color = color.substring(1)
        }
        if(id == -1){
            WeaTools.callApi('/api/portal/custommodule/saveCModules', 'POST', {
                moduleid:this.props.id,
                "name":name,
                "icon":pic?pic:"/spa/portal/images/customApplicationDefaultLogo.png",
                "linkurl":ishttp==1?JSON.stringify(url):url,
                "color" : color,
                'urltype': ishttp,
                "counturl":counturl,
                "ordernum": this.state.container.data.length,
                "status":"1",
                "openmode":"1"
            }).then((result) => {
                if (result.api_status == true) {
                    message.success(getLabel(83551, '保存成功！'), 3);
                    this.getAllData();
                    this.setAddVisiable(false)

                } else {
                    message.error(getLabel(84544, '保存失败！'), 3);

                }
            });
        }else{
            WeaTools.callApi('/api/portal/custommodule/updatecmodule', 'POST', {
                    "infoid":id,
                    "name":name,
                    "icon":pic,
                    "linkurl":ishttp==1?JSON.stringify(url):url,
                    "color" : color,
                    'urltype' : ishttp,
                    "counturl":counturl,
                    "openmode":"1",
                    "status":"1",
                }).then((result) => {
                if (result.api_status == true) {
                    message.success(getLabel(83551, '保存成功！'), 3);
                    this.getAllData();
                    this.setAddVisiable(false)


                } else {
                    message.error(getLabel(84544, '保存失败！'), 3);

                }
            });
        }

    };

    onAddSave= (fromData)=> {
        const { id ,text,logo ,bgc,url,urlType,showNumberUrl} = fromData;
        const {text : name ,logo : pic,bgc : color,urlType : ishttp ,showNumberUrl : counturl} = fromData;
        let isError = false;
        if (!url) isError = true;
        if (!text.trim()) isError = true;
        if (isError) {
            message.warning(getLabel(15859, '必要信息不完整！'));
            return;
        }
        if (showNumberUrl) {
            WeaTools.callApi(showNumberUrl, 'POST').then((result) => {
                if (result.count != '' && result.count != null && !isNaN(result.count)) {
                    this.updateMenu(fromData);
                } else {
                    Modal.error({
                        title: getLabel(15172, '系统提示'),
                        content: getLabel(387137, '未读数接口地址返回的数据格式错误！'),
                    });
                }
            }).catch((ex) => {
                Modal.error({
                    title: getLabel(15172, '系统提示'),
                    content: getLabel(387138, '未读数接口地址不正确！'),
                });
            });
        } else {
            this.updateMenu(fromData);
        }
    }

    cancelCustomeApplicationSetting = ()=>{
        //取消
        this.setCustomApplicationButtonsVisible(false)
    }

    addCustomeApplicationExample = ()=>{

        let container =  Object.assign(this.state.container ,{"addVisiable" : true,'arrayId':-1});
        this.setState({
            container
        })

    }

    setAddVisiable = (visible)=>{
        let container

        if(visible == false){
            container =  Object.assign(this.state.container ,{"addVisiable" : visible,'arrayId':-1,"editItem":{}});
        }else{
            container = Object.assign(this.state.container ,{"addVisiable" : visible});
        }
        this.setState({
            container
        })
    }
    setAddVisiableAndEditItem = (index)=>{
        let container =  Object.assign(this.state.container ,{"addVisiable" : true,'arrayId':index,"editItem":this.state.container.data[index]});
        this.setState({
            container
        })
    }
    setAddOrEdit = (status) =>{
        let container =  Object.assign(this.state.container ,{"addOrEdit" : status});
        this.setState({
            container
        })
    }

    setStateData = (stateData)=>{
        let container =  Object.assign(this.state.container ,stateData);
        this.setState({
            container
        })
    }

    deleteApplicationById = (arrayId,id)=>{
            WeaTools.callApi('/api/portal/custommodule/deletecmodule', 'POST', {
            "infoid ":id
        }).then((result) => {
            let data = this.state.container.data;
            data.splice(arrayId)
            this.setStateData({data,data})
        });


    }


    showManagerSetting = (tf)=>{
        this.setStateData({managerSettingVisible:tf})
    }

    addSortIds = (ids)=>{
        this.setStateData({sortIds:ids})
    }

    handlerMouseEnter = ()=>{
        $(".lr_settingButtons_"+this.props.id).show();
    }

    handlerMouseLeave = () => {
        $(".lr_settingButtons_"+this.props.id).hide();
    }

    componentDidMount(){

        $("#customApplications").find("ul").css({"width":"100%","height":"100%"})
    }


    render() {
        let styles = []
        let newStyle =this.state.container.newStyle
        styles = (newStyle+"").split(",")
        let containerLR =""
        let containerTB = ""
        let applicationLR = ""
        let applicationTB = ""
        let containerRadius = ""
        let applicationDivRadius = ""
        let applicationFontColor = ""
        let containerBgi = ""
        let applicationLogoRadius = ""
        let logoTextMargin = ""
        if(styles.length == 10){
            containerLR = styles[0]
            containerTB = styles[1]
            applicationLR = styles[2]
            applicationTB = styles[3]
            containerRadius = styles[4]
            applicationDivRadius = styles[5]
            applicationFontColor = styles[6]
            containerBgi = styles[7]
            applicationLogoRadius = styles[8]
            logoTextMargin = styles[9]
        }


        const containerPadding = containerTB+"px "+containerLR+"px"
        const applicationMargin = applicationTB+"px "+applicationLR+"px"
        const containerRadiusReal = containerRadius+"px"
        const applicationDivRadiusReal = applicationDivRadius+"px"
        const applicationFontColorReal = applicationFontColor
        const containerBgiReal = containerBgi
        const applicationLogoRadiusReal = applicationLogoRadius+"px"




        let datatemp =[];
        for(let i in this.state.container.data){
            datatemp.push(this.state.container.data[i])
        }
       datatemp.push({
           id : -1,
           text : "",
           logo : "",
           bgc : "",
           url :"",
           urlType : "1",
           showNumberUrl: "11111"
       })
        /*let row
        let col
        if(this.state.container.rowCol.split("*").length >0){
               row = this.state.container.rowCol.split("*")[0]
               col = this.state.container.rowCol.split("*")[1]
        }*/

        let displayComp
            if (this.state.container.openPageHelper==1) {
                let carouselItems = [];
                for (let i = 0; i < Math.ceil(this.state.container.data.length/(this.state.container.pageSize)); i++) {
                    let items = this.state.container.data.slice(i * this.state.container.pageSize, (i + 1) * this.state.container.pageSize);

                    carouselItems.push(

                        <WeaNewScroll
                            height={this.state.container.ctrlHeight}
                            onScroll={(e)=>{
                                this.setStateData({
                                    scrollTop:e.target.scrollTop,
                                })
                            }}>
                            <div className={"lr_customer_application_inter_"+this.props.id}>
                                <div className="lr_customer_application_inter_div_autoWidthHeight" >
                                    {
                                        !this.state.container.customApplicationButtonsVisible ?items.map((item, index) => {
                                            return <CustomApplication {... item} container={this.state.container} rowCol={this.state.container.rowCol} outIndex={i} index={index}  customApplicationFontColor={this.state.container.customApplicationFontColor}/>
                                        }) :""
                                    }

                                    {/*{*/}
                                    {/*this.state.container.customApplicationButtonsVisible == true ? (*/}
                                    {/*<div>*/}
                                    {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px",opacity: '0.2',"background-color":"#000"}}></div>*/}
                                    {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px"}}>*/}
                                    {/*<Button type="primary" style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.addCustomeApplicationExample}>添加应用</Button>*/}
                                    {/*<Button type="primary"  style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.saveCustomApplicationSetting}>保存</Button>*/}
                                    {/*<Button style={{"border-radius":"3px"}} onClick={this.cancelCustomeApplicationSetting}>取消</Button>*/}
                                    {/*</div></div>): ""*/}
                                    {/*}*/}
                                </div>
                            </div>
                        </WeaNewScroll>

                    );
                }

                displayComp = (
                    <Carousel slideIndex={this.state.container.current} afterSlide={(slideIndex)=>{this.setStateData({current:slideIndex})}}>
                        {carouselItems}
                    </Carousel>
                )
            } else if(this.state.container.openPageHelper==0){
                displayComp =(

                    <div className={"lr_customer_application_inter_"+this.props.id}>


                        <div className="lr_customer_application_inter_div_autoWidthHeight" >

                            {
                                !this.state.container.customApplicationButtonsVisible ?this.state.container.data.map((item, index) => {
                                    return <CustomApplication {... item} container={this.state.container} rowCol={this.state.container.rowCol} index={index} customApplicationFontColor={this.state.container.customApplicationFontColor}/>
                                }) :""
                            }

                            {/*{*/}
                            {/*this.state.container.customApplicationButtonsVisible == true ? (*/}
                            {/*<div>*/}
                            {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px",opacity: '0.2',"background-color":"#000"}}></div>*/}
                            {/*<div style={{position:"absolute",bottom:'0px',height:"60px",width:'100%','text-align':'center','line-height': "60px"}}>*/}
                            {/*<Button type="primary" style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.addCustomeApplicationExample}>添加应用</Button>*/}
                            {/*<Button type="primary"  style={{'margin-right':"20px","border-radius":"3px"}} onClick={this.saveCustomApplicationSetting}>保存</Button>*/}
                            {/*<Button style={{"border-radius":"3px"}} onClick={this.cancelCustomeApplicationSetting}>取消</Button>*/}
                            {/*</div></div>): ""*/}
                            {/*}*/}


                        </div>
                    </div>
                )
            }

        return (
                <div className={"lr_customer_application_"+this.props.id+" lr_customer_application_class"} onMouseEnter={this.handlerMouseEnter} onMouseLeave={this.handlerMouseLeave} style={{'background-image':'url('+containerBgiReal+')','border-radius':containerRadiusReal}}>
                    {
                        this.state.container.openPageHelper==0 ? (<WeaNewScroll
                            height={this.state.container.ctrlHeight}
                            onScroll={(e)=>{
                                this.setStateData({
                                    scrollTop:e.target.scrollTop,
                                })
                            }}>
                            <div id={"lr_customer_application_outer_"+this.props.id} className="lr_customer_application_inter_div_autoWidthHeight"
                                 style={{"padding":containerPadding}}>

                                {displayComp}

                            </div>
                        </WeaNewScroll>):(<div id={"lr_customer_application_outer_"+this.props.id} className="lr_customer_application_inter_div_autoWidthHeight"
                                               style={{"padding":containerPadding}}>

                            {displayComp}

                        </div>)

                    }
                    {

                        this.state.container.current > 0  && this.state.container.openPageHelper==1 ?
                            <div className={"icon-coms-Left lr_settingButtons_"+this.props.id+" lr_customer_application_left_right_click"}   onClick={()=>{this.setStateData({"current":this.state.container.current-1})}}></div>
                            :""
                    }
                    {
                        this.state.container.current < this.state.container.data.length/(this.state.container.pageSize)-1  && this.state.container.openPageHelper==1 ?
                            <div className={"icon-coms-Right lr_settingButtons_"+this.props.id+" lr_customer_application_left_right_click"}    onClick={()=>{this.setStateData({"current":this.state.container.current+1})}}></div>
                            :""
                    }
                    {
                            this.props.isSetting == true ?( <div className={"lr_settingButtons_"+this.props.id +" lr_settingButtons_class"} >

                            <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {
                                this.showManagerSetting(true)
                            }}></span>

                        </div>):((this.state.container.addOption==1 || this.state.container.sortOption == 1)?(<div className={"lr_settingButtons_"+this.props.id+"  lr_settingButtons_class"} >

                            <span className="icon-coms-Flow-setting  lr_settingButtons_span_class"  onClick={() => {
                                this.showManagerSetting(true)
                            }}></span>

                        </div>):"")
                    }

                    <WeaDialog
                        title="应用设置"
                        visible={this.state.container.customApplicationButtonsVisible }
                        iconBgcolor='#1a57a0'
                        hasScroll={true}
                        style={{width: 900,height : 600}}
                        onCancel={()=>{this.setCustomApplicationButtonsVisible(false)}}
                    >

                        <div id="customApplications" style={{'background-image':'url('+this.state.container.img+')'}}>
                            <DragSort data={datatemp} setStateData={this.setStateData} container={this.state.container} addCustomeApplicationExample={this.addCustomeApplicationExample} deleteApplicationById={this.deleteApplicationById} setAddVisiableAndEditItem={this.setAddVisiableAndEditItem}/>
                        </div>
                    </WeaDialog>
                    <ContainerSetting saveCustomContainerSetting={this.saveCustomContainerSetting} setShowContainerSetting={this.setShowContainerSetting} data={{"rowCol":this.state.container.rowCol,"showContainerSetting":this.state.container.showContainerSetting}}></ContainerSetting>
                    <AddCustomApplication  addVisiable={this.state.container.addVisiable} arrayId={this.state.container.arrayId} setAddVisiable={this.setAddVisiable} saveCustomApplication={this.saveCustomApplication} setStateData={this.setStateData} data={this.state.container.editItem}></AddCustomApplication>
                    <ManagerSetting getAllData={this.getAllData} setAddVisiableAndEditItem={this.setAddVisiableAndEditItem} saveManagerSetting={this.saveManagerSetting} addSortIds={this.addSortIds} container={this.state.container} setStateData={this.setStateData} addCustomeApplicationExample={this.addCustomeApplicationExample}></ManagerSetting>


            </div>
        );
      /*  return (
            <WeaDialog
                title="应用设置"
                visible={true }
                iconBgcolor='#1a57a0'
                hasScroll={true}
                style={{width: 1200,height : 600}}
                onCancel={()=>{this.setCustomApplicationButtonsVisible(false)}}
            >

               <Dg></Dg>



            </WeaDialog>
        )*/
    }


    saveApplicationShare = () =>{
        let aa = [{
            includeSub:false,  //包含下级
            jobShareLevel: "1", //岗位级别（1、2、3 总部、指定部门、指定分部）
            jobShareValue: "", // 岗位级别为指定部门、指定分部、选中的部门、分部id
            key: -2,
            roleLevel: "0",  //角色级别(0、1、2 部门、分部、总部)
            securityLevel: "0-100",  //安全级别
            securityMaxLevel: 100,  //安全级别max
            securityMinLevel: 0,    //安全级别min
            shareType: "2",         //共享类型id（部门3、分部2、所有人7、人力资源1、角6、岗位8...）
            shareTypeName: "分部",  //共享类型name
            shareValue: "1,157,186", //类型对象id(如部门id。。)
            shareValueName: "支撑服务本部,EBU事业本部,e-office事业本部(含下级)"  //类型对象name
        }]

        const shareValues = this.refs['tab4Share'] ? this.refs['tab4Share'].getSaveValues() : {};
        let shareList = []
        if(shareValues&&shareValues.eShareList){
           for(let i in shareValues.eShareList){
               let sharetype =""
               let sharevalue =""
               let sharelevel = ""
               let appointvalue = ""
               let element = ""
               let app = ""
               let content = ""
               let operatelevel = ""
               let securityminlevel = ""
               let securitymaxlevel = ""
               if(shareValues.eShareList[i].shareType=='3'){


                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='2'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='7'){
                   sharetype = shareValues.eShareList[i].shareType
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='1'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
               }else if(shareValues.eShareList[i].shareType=='6'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   sharelevel =  shareValues.eShareList[i].roleLevel==1?1:(shareValues.eShareList[i].roleLevel==2?0:2)
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }else if(shareValues.eShareList[i].shareType=='8'){
                   sharetype = shareValues.eShareList[i].shareType
                   sharevalue   =  shareValues.eShareList[i].shareValue
                   sharelevel =  shareValues.eShareList[i].jobShareLevel-1
                   if(sharelevel!=0){
                       appointvalue = shareValues.eShareList[i].jobShareValue
                   }
                   securityminlevel = shareValues.eShareList[i].securityMinLevel
                   securitymaxlevel = shareValues.eShareList[i].securityMaxLevel
               }
               shareList.push({
                   sharetype,
                   sharevalue,
                   sharelevel,
                   appointvalue,
                   element,
                   app,
                   content,
                   operatelevel,
                   securityminlevel,
                   securitymaxlevel
               })

           }
        }
        //调用共享数据保存接口
        WeaTools.callApi('/api/portal/setting/saveSetting', 'POST', {
            jsonStr : JSON.stringify({...shareValues})

        }).then(result => {
            if(result.api_status = true){
                message.success(getLabel(83551, '保存成功！',3))
                this.setStateData({shareVisible:false})
            }else{
                message.error(getLabel(84544, '保存失败！'), 3)
            }

        });
    }
    getButtons= ()=> {
        let onAddSave = this.props.saveCustomApplication

        let btns = [];
        btns.push(<Button type="primary" onClick={()=>{this.saveApplicationShare}}>{getLabel(30986, '保存')}</Button>);
        btns.push(<WeaMoreButton datas={this.getRightMenus()}/>);
        return btns;
    }
    getRightMenus=()=> {
        let onAddSave = this.props.saveCustomApplication
        let btns = [];
        btns.push({key: '1', icon: <i className="icon-coms-Preservation"/>, content: getLabel(30986, '保存'), onClick: ()=>{this.saveApplicationShare}});
        return btns;
    }

    saveCustomContainerSetting = (data)=>{
        this.setStateData({"rowCol":data.rowCol})
        this.setShowContainerSetting(false)
    }

}

export default CustomContainer;